<template>
  <el-card style="width: 100%; text-align: center">
    <template #header>
      <div class="card-header">
        <h3 style="color: #1677ff">设备列表</h3>
      </div>
      <!-- 搜索区 -->
      <el-form :model="form" label-width="auto" style="display: flex; margin-top: 20px">
        <el-form-item label="搜索">
          <el-input v-model="form.name" placeholder="关键字" />
        </el-form-item>

        <el-form-item label="在线状态" style="width: 200px; margin-left: 20px">
          <el-select v-model="form.region" placeholder="全部" clearable>
            <el-option label="全部" value="" />
            <el-option label="开启" value="true" />
            <el-option label="关闭" value="false" />
          </el-select>
        </el-form-item>
      </el-form>
    </template>
    <!-- 表格 -->
    <a-table
      :columns="columns"
      :data-source="tabledata"
      @change="onChange"
      :total="total"
      :show-total="(total) => `共${total}条`"
      :scroll="{ x: 1300, y: 1000 }"
    >
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.dataIndex === 'operation'">
          <a-button type="primary" @click="channList"
            ><template #icon><HourglassOutlined /></template>查看通道</a-button
          >
          <a-button style="background-color: #556677; color: #fff"
            ><template #icon><RedoOutlined /></template>更新通道</a-button
          >
          <a-button @click="onDetail(record)" style="background-color: #f39c12; color: #fff"
            ><template #icon><EditOutlined /></template>编辑</a-button>

          <!-- 编辑弹框 -->
          <a-modal v-model:open="open" title="编辑设备" @ok="handleOk" style="width: 1300px; text-align: center" :body-style="bodystyle">
            <a-row>
              <a-col :span="12">
                <a-form ref="formRef" :model="formState" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol" style="margin-top: 20px">
                  <a-form-item ref="number" label="设备编号" name="ID">
                    <a-input v-model:value="formState.ID"/>
                  </a-form-item>
                  <a-form-item label="自定义名称">
                    <a-input id="put" v-model:value="formState.CustomName"></a-input>
                  </a-form-item>
                  <a-form-item label="信令联络IP" name="signalling">
                    <a-input v-model:value="formState.ContactIP" />
                  </a-form-item>
                  <a-form-item label="SMS ID" name="SMSID">
                    <a-select v-model:value="formState.SMSID">
                      <a-select-option v-for="item in SMSIDList" :key="item['Serial']" :value="item['Serial']">{{ item['Serial'] }}</a-select-option>
                    </a-select>
                  </a-form-item>
                  <a-form-item label="SMS 分组" name="SMSGroupID">
                    <a-select v-model:value="formState.SMSGroupID">
                      <a-select-option value="shanghai">自动选择负载最小</a-select-option>
                    </a-select>
                  </a-form-item>

                  <a-form-item label="收流IP" name="RecvStreamIP">
                    <a-input v-model:value="formState.RecvStreamIP" />
                  </a-form-item>
                  <a-form-item label="过滤通道类型" name="DropChannelType">
                    <a-select v-model:value="formState.DropChannelType">
                      <a-select-option value="shanghai">123-报警输出</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-form>
              </a-col>
              <a-col :span="12">
                <a-form ref="formRef" :model="formState" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol" style="margin-top: 20px">
                  <a-form-item label="通道跟新周期(秒)" name="CatalogInterval">
                    <a-input v-model:value="formState.CatalogInterval" />
                  </a-form-item>
                  <a-form-item label="字符集" name="CommandTransport">
                    <a-select v-model:value="formState.CommandTransport">
                      <a-select-option value="shanghai">123-报警输出</a-select-option>
                    </a-select>
                  </a-form-item>
                  <a-form-item label="码流索引" name="MediaTransport">
                    <a-select v-model:value="formState.MediaTransport">
                      <a-select-option value="shanghai">123-报警输出</a-select-option>
                    </a-select>
                  </a-form-item>
                  <a-form-item label="流传输模式" name="MediaTransport">
                    <a-space direction="vertical">
                      <div>
                        <a-switch style="margin-right: 30px" v-model:MediaTransport="state.checked1" checked-children="TCP" un-checked-children="UDP" />
                        <a-switch v-model:MediaTransportMode="state.checked2" checked-children="被动" un-checked-children="主动" />
                      </div>
                    </a-space>
                  </a-form-item>
                  <a-form-item label="订阅项目" name="subscribe">
                    <a-checkbox-group v-model:value="formState.subscribe">
                      <a-checkbox :value="formState.CatalogSubscribe" name="CatalogSubscribe">目录订阅</a-checkbox>
                      <a-checkbox :value="formState.AlarmSubscribe" name="AlarmSubscribe">报警订阅</a-checkbox>
                      <a-checkbox :value="formState.PositionSubscribe" name="PositionSubscribe">位置订阅</a-checkbox>
                    </a-checkbox-group>
                  </a-form-item>
                  <a-form-item label="设备录像" name="picture">
                    <a-checkbox-group v-model:value="formState.picture">
                      <a-checkbox :value="formState.RecordCenter" name="type">中心检索</a-checkbox>
                      <a-checkbox :value="formState.RecordIndistinct" name="type">模糊查询</a-checkbox>
                    </a-checkbox-group>
                  </a-form-item>
                  <a-form-item label="目录结构" name="structure">
                    <a-checkbox-group v-model:value="formState.structure">
                      <a-checkbox :value="formState.CivilCodeFirst" name="CivilCodeFirst">行政区域优先</a-checkbox>
                    </a-checkbox-group>
                  </a-form-item>
                  <!-- </a-col> -->
                </a-form>
              </a-col>
            </a-row>
          </a-modal>
        </template>
      </template>
    </a-table>
  </el-card>
</template>

<script setup>
  import { ChannelAdaptationApi } from '/@/api/support/videoSystem';
  import { reactive, ref, onMounted } from 'vue';
  import { router } from '/@/router';
  import { smartSentry } from '/@/lib/smart-sentry';

  // 分页
  // const currentPage = ref(1); // 当前页码
  // const pageSize = ref(10); // 每页显示条数
  // const totalCount = ref(0); // 可能还需要一个总条数来计算总页数
  const tabledata = ref([]); // 表格数据
  const total = ref(10); // 总数
  // 表格数据传过来的参
  const tablequery = {
    start: 1,
    limit: 10,
    q: '',
    online: false,
  };
  const DateList = reactive({ ...tablequery });
  // 表格加载loading
  const tableLoading = ref(false);
  async function queryData() {
    tableLoading.value = true;
    try {
      let res = await ChannelAdaptationApi.remotetable(DateList);
      tabledata.value = res.DeviceList;
      total.value = res.DeviceCount;
      console.log(res);
    } catch (e) {
      smartSentry.captureError(e);
    } finally {
      tableLoading.value = false;
    }
  }
  onMounted(queryData);
  // 编辑框里的启动禁止按钮
  const state = reactive({
    checked1: true,
    checked2: true,
  });
  // 设置编辑弹框的大小
  const bodystyle = {
    height: '500px',
    overflow: 'hidden',
    overflowY: 'scroll',
  };
  // 上方搜索区域
  const form = reactive({
    name: '',
    region: '',
    address: '',
    type: '',
    National: '',
  });

  const labelCol = {
    span: 5,
  };
  const wrapperCol = {
    span: 13,
  };
  // 编辑弹框字段
  const formState = reactive({
    ID: '',
    CustomName: '',
    ContactIP: '',
    RecvStreamIP:'',
    SMSID:'',
    DropChannelType: '',
    CatalogInterval: '',
    CommandTransport: '',
    MediaTransport: '',
    CatalogSubscribe: '',
    AlarmSubscribe:'',
    PositionSubscribe: '',
  });
  const rules = {
    number: [
      {
        required: true,
        message: 'Please input Activity name',
        trigger: 'change',
      },
    ],
  };
  // 弹框
  const open = ref(false);
  // 编辑回显
  const formRef = ref();
  const onDetail = (goodsData) => {
    console.log(goodsData);
    formState.ID = goodsData.ID
    formState.CustomName = goodsData.CustomName
    formState.ContactIP = goodsData.ContactIP
    formState.CatalogInterval = goodsData.CatalogInterval
    formState.RecvStreamIP = goodsData.RecvStreamIP
    open.value = true;

    smsidList()
};
// SMS下拉框
const SMSIDList = ref([]);
// const SMSIDList = () => {
  async function smsidList() {
    let res = await ChannelAdaptationApi.PulldowNQuery();
    console.log(res)
    SMSIDList.value=res
    // console.log(res)
  }

  const handleOk = () => {
    // console.log(e);
    open.value = false;
  };
  // 查看通道
  const channList = () => {
    router.push({ path:'/VideoSystem/ChannelAdaptation2'});
  };
  // 表格
  const columns = [
    {
      title: '设备国标编号',
      dataIndex: 'ID',
      width: 200,
    },

    {
      title: '名称',
      dataIndex: 'Name',
      width: 150,
    },
    {
      title: '流传输模式',
      dataIndex: 'MediaTransport',
      width: 150,
    },
    {
      title: '通道数',
      dataIndex: 'ChannelCount',
      sorter: {
        compare: (a, b) => a.english - b.english,
        multiple: 4,
      },
      width: 100,
    },
    {
      title: '在线状态',
      dataIndex: 'Online',
      width: 100,
    },
    {
      title: '出口IP',
      dataIndex: 'RemoteIP',
      width: 220,
    },
    {
      title: '所在地区',
      dataIndex: 'RemoteRegion',
      width: 200,
    },
    {
      title: '厂家',
      dataIndex: 'Manufacturer',
      width: 150,
    },
    {
      title: '最近心跳',
      dataIndex: 'LastKeepaliveAt',
      sorter: {
        compare: (a, b) => a.LastKeepaliveAt - b.LastKeepaliveAt,
        multiple: 1,
      },
      width: 220,
    },
    {
      title: '最近注册',
      dataIndex: 'LastRegisterAt',
      sorter: {
        compare: (a, b) => a.LastRegisterAt - b.LastRegisterAt,
        multiple: 1,
      },
      width: 220,
    },
    {
      title: '更新时间',
      dataIndex: 'UpdatedAt',
      sorter: {
        compare: (a, b) => a.newtime - b.newtime,
        multiple: 1,
      },
      width: 220,
    },
    {
      title: '创建时间',
      dataIndex: 'CreatedAt',
      sorter: {
        compare: (a, b) => a.CreatedAt - b.CreatedAt,
        multiple: 1,
      },
      width: 220,
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: 350,
      fixed: 'right',
    },
  ];
  const data = [
    {
      ID: '',
      Name: '',
      ChannelCount: '',
      Online: '',
      RemoteIP: '',
      broadcast: '',
      Manufacturer: '',
      LastKeepaliveAt: '',
      LastRegisterA: '',
      UpdatedAt: '',
      Created: '',
    },
  ];

  function onChange(pagination, filters, sorter, extra) {
    // console.log('params', pagination, filters, sorter, extra);
  }
</script>

<style scoped></style>
